<template>
  <div>
    <ul v-if="item.children && item.children.length > 0">
      <li>
        <router-link :to="item.path" v-if="item.permissionType == 'C'"
          >{{ item.permissionName }}
        </router-link>
        <span v-else>{{ item.permissionName }} </span>

        <template v-for="(c, i) of item.children">
          <span v-if="c.permissionType != 'F'" :key="i">
            <MenuItem :key="i" :item="c" />
          </span>
        </template>
      </li>
    </ul>
    <ul v-else>
      <router-link :to="item.path" v-if="item.permissionType == 'C'"
        >{{ item.permissionName }}
      </router-link>
      <span v-else>{{ item.permissionName }} </span>
    </ul>
    <!-- 
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>系统模块</span>
        </template>
        <el-menu-item-group>
          <el-menu-item>
            <router-link to="/Home/User">用户管理</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/Home/Role">角色管理</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/Home/Permission">权限管理</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu> 
    -->
  </div>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    item: Object,
  },
  methods: {
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
  },
};
</script>

<style scoped>
  ul li {
    list-style-type: none;
  }
</style>